<script setup lang="ts">
import { ApiGetDagErrorResponseDto } from '@/services/bussiness/Task/task.api.dto'
import { nextTick, onMounted, ref, watch } from 'vue'
import { DagChart } from './dag.chart'
import { useDagStore } from '@/stores/dag/dag.store'

const dagStore = useDagStore()
const echartsEl = ref()
const isShowEmpty = ref(false)
const isShowLoading = ref(true)
const emptyDescription = ref('')
const props = defineProps({
  dagName: {
    type: String
  }
})
const emits = defineEmits(['onAfterInit'])

function initChart(dagName: string) {
  isShowLoading.value = true
  isShowEmpty.value = false
  nextTick(() => {
    const dagChart = new DagChart(echartsEl.value, dagName)
    dagChart.onAfterInit((error: ApiGetDagErrorResponseDto | void) => {
      isShowLoading.value = false
      if (error) {
        emptyDescription.value = error.message || error.msg
        isShowEmpty.value = true
      }
      dagStore.updateDagChart(dagChart)
      emits('onAfterInit', error)
    })
  })
}

onMounted(() => {
  watch(
    () => props.dagName,
    (now) => {
      if (now) {
        initChart(now)
      }
    },
    {
      immediate: true
    }
  )
})
</script>

<template>
  <div v-loading="isShowLoading" element-loading-text="数据加载中" class="wrapper">
    <el-empty
      v-if="!isShowLoading && isShowEmpty"
      :image-size="200"
      :description="emptyDescription"
    />
    <div v-else ref="echartsEl" id="echartsEl"></div>
  </div>
</template>

<style scoped>
.wrapper,
#echartsEl {
  width: 100%;
  height: 100%;
}
</style>
